<template>
  <div class="carbon-credit-page">

    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <el-row :gutter="20" class="filter-row">
        <el-col :span="4">
          <div class="filter-item" style="display: flex; align-items: center">
            <span class="filter-label">文档类型</span>
            <el-select
              v-model="form.fileType"
              placeholder="全部"
              clearable
              class="filter-select"
              style="flex: 1"
            >
              <el-option v-for="item in fileType" :label="item.itemCh" :value="item.itemValue":key="item.id" ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="filter-item" style="display: flex; align-items: center; gap: 10px;">
            <span class="filter-label">审批日期</span>
            <el-date-picker
              v-model="form.completionDateStart"
              style="flex: 1;"
              type="date"
              placeholder="开始时间"
              clearable
              class="filter-date"
            ></el-date-picker>
            <span style="white-space: nowrap;">至</span>
            <el-date-picker
              v-model="form.completionDateEnd"
              style="flex: 1;"
              type="date"
              placeholder="结束时间"
              clearable
              class="filter-date"
            ></el-date-picker>
          </div>
        </el-col>

        <el-col :span="12">
          <div style="display: flex;" class="filter-item">
            <span style="margin-top: 8px; margin-right: -40px;" class="filter-label2">文档名称</span>
            <div class="search-container">
              <el-input
                v-model="form.title"
                placeholder="输入文档名称"FileUrl
                clearable
                class="search-input"
                style="flex: 1"s
                @keyup.enter.native="handleSearch"
              ></el-input>
              <el-button type="success" plain @click="queryProjectsFile"
                >查询</el-button>
               
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="display: flex;">
  <el-button type="success" style="width: 120px;  margin-top: 20px; justify-content: center;
   align-items: center;" plain @click="fromVisible = true;" >创建文档</el-button >
   
   <el-button type="success" style="width: 120px;  margin-top: 20px; margin-left: 1150px; justify-content: center;
   align-items: center;" plain @click="showall" >显示全部</el-button >
     </div>
    </div>

    <!-- 表格数据区域 -->
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%"
        v-loading="tableLoading"
      >
        <el-table-column prop="id" label="序号" align="center" width="180"></el-table-column>
        <el-table-column
          prop="title"
          label="文档名称" 
          show-overflow-tooltip
          width="350"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="文档类型" 
          align="left"
          show-overflow-tooltip
          width="210"
        ></el-table-column>
       
        <el-table-column
          prop="updatedTime"
          label="上传日期" 
          width="250"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="completionDate"
          label="审批日期" 
          width="250"
          align="center"
          
        ></el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template v-slot="scope">
            <div class="operation-btns">
               <span 
                class="btn-text view" 
                @click="handleView(scope.row.url)"
              >查看</span>
              <span 
                class="btn-text delete" 
                @click="handleDelete(scope.row.id)"
              >删除</span>
               <span 
                v-if="scope.row.type === '设计文档'&& scope.row.status === 0"
                class="btn-text delete" 
                @click="handlesjsp(scope.row)"
              >审批设计</span>
              <span 
                v-if="scope.row.type === '审定报告'&& scope.row.status === 0"
                class="btn-text delete" 
                @click="handlesdsp(scope.row)"
              >审批审定</span>
              <span 
                v-if="scope.row.type === '监测报告'&& scope.row.status === 0"
                class="btn-text delete" 
                @click="handlejcsp(scope.row)"
              >监测审定</span>
               <span 
                v-if="scope.row.type === '核证报告'&& scope.row.status === 0"
                class="btn-text delete" 
                @click="handlehzsp(scope.row)"
              >核证审定</span>
               <span 
                v-if="scope.row.type === '签证报告'&& scope.row.status === 0"
                class="btn-text delete" 
                @click="handleqzsp(scope.row)"
              >签证审定</span>
            </div>
            
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination" v-if="mainTotal > 0">
        <el-pagination
          background
          @current-change="handleMainPageChange"
          @size-change="handleMainPageSizeChange"
          :current-page="mainPageNum"
          :page-size="mainPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :page-count="mainTotalPages"
          :page-sizes="[5, 10, 15, 20]"
        ></el-pagination>
      </div>
    </div>

     <!-- 上传弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="fromVisible"
      width="40%"
      :close-on-click-modal="false"
      destroy-on-close
      @close="resetUploadForm"
    >
      <div class="upload-dialog-content">
        <el-form
         :rules="formRules"
          :model="uploadForm"
          size="medium"
          ref="uploadForm"
  
        >
          <!-- 项目名称 + 选择项目按钮 -->
          <el-form-item label="项目名称" required prop="projectName">
            <el-input
              v-model="uploadForm.projectName"
              placeholder="请输入项目名称"
              style="width: 60%; margin-right: 10px"
              
            ></el-input>
            <el-button
              size="small"
              type="primary"
              plain
              @click="openProjectSelector"
              >选择项目</el-button
            >
          </el-form-item>


          <!-- 文件类型 -->
          <el-form-item label="文件类型" required prop="type">
            <el-select
              v-model="uploadForm.type"
              placeholder="请选择文件类型"
              style="width: 30%"

            >
             <el-option
            v-for="item in  fileType"
            :key="item.itemCh"  
            :label="item.itemCh" 
            :value="item.itemValue"
           ></el-option>
            </el-select>
          </el-form-item>

           <el-form-item label="项目文档" required prop="FileUrl">
                <el-upload
                  :on-change="handleTranChange"
                  :on-remove="removeFileList"
                  accept=".pdf,.docx,.xlsx,.xls,.jpg,.png"
                  style="width: 180px"
                  :action="upLoadParam.url"
                  :file-list="FileList"
                  :auto-upload="true"
                   :headers="{ token: upLoadParam.token }"
                  :on-success="upLoadParamTranFile"
                  :on-preview="tranFilehandlePreview"
                >
                  <el-button size="small" type="primary">选择文件</el-button>
                </el-upload>
                <div v-if="uploadForm.uploadFileName" class="file-name">
                  已选择：{{ uploadForm.uploadFileName }}
                </div>
              </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>
     <!-- 项目选择弹窗 -->
    <el-dialog
      title="项目列表"
      :visible.sync="projectSelectorVisible"
      width="50%"
      @close="handleProjectSelectorClose"
    >
      <!-- 搜索区域 -->
      <div class="project-search-bar">
        <el-input
          v-model="projectSearchKey"
          placeholder="输入项目名称"
          clearable
          style="width: 70%; margin-right: 10px"
          @keyup.enter.native="fetchProjectList"
        ></el-input>
        <el-button type="primary" plain @click="fetchProjectList"
          >查询</el-button
        >
      </div>

      <!-- 项目表格 -->
      <el-table
        :data="projectList"
        :height="400"
        style="width: 100%"
        @selection-change="handleProjectSelect"
        class="project-selector-table"
        v-loading="projectLoading"
      >
        <el-table-column
          label="序号"
          type="index"
          width="70"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="名称"
          show-overflow-tooltip
           width="200"
        ></el-table-column>
        <el-table-column
          prop="industry"
          label="行业"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="certificationCriteria"
          label="核证标准"
          width="170"
        ></el-table-column>'
        <el-table-column
          prop="projectStatus"
          label="状态"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template v-slot="scope">
            <el-button type="text" @click="selectProject(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div
        class="project-pagination"
        style="margin-top: 15px; text-align: right"
        v-if="projectTotal > 0"
      >
        <el-pagination
          background
          @current-change="handleProjectPageChange"
          @size-change="handleProjectPageSizeChange"
          :current-page="projectPageNum"
          :page-size="projectPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="projectTotal"
          :page-sizes="[5, 10, 15]"
        ></el-pagination>
      </div>
    </el-dialog>


        <!--审批弹窗-->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="qzView"
        width="40%"
        :close-on-click-modal="false"
        destroy-on-close
        @close="resetUploadForm2"
        >
            <div class="upload-dialog-content">
            <el-form
            :model="spForm"
            size="medium"
            label-width="100px"
            >
            <el-form-item   label="备案减排量" prop="">
                <el-input 
                v-model=" spForm.recordFilingReduction" 
                placeholder="请输入备案减排量"
                ></el-input>
                
            </el-form-item>
            <el-form-item label="核证机构">
                      <el-select
                        placeholder="全部"
                        clearable
                        class="filter-select"
                        v-model="spForm.certifiedAgency"
                      >
              <el-option v-for="item in issuingAgency" :label="item.itemCh" :value="item.itemValue":key="item.id" ></el-option>
            </el-select>
            </el-form-item>

            </el-form>
        </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="resetUploadForm2">取消</el-button>
    <el-button type="primary" @click="handleSubmit2()">提交</el-button>
  </div>
      </el-dialog>
  </div>
</template>

<script>
import {
  getFeiShuUpLoadProjectParams,

} from "@/api/tenant";
export default {
  name: "projectDo",
  data() {
    return {
      issuingAgency:[],
      id:'',
      qzView:false,
      carbonProjectId:'',
      fromVisible:false,
      projectSelectorVisible: false,
      projectLoading: false,
      // 领域
      projectScope: [],
      // 核证机构
      certificationCriteria: [],
      // 产业类型
      industory: [],
      // 项目状态
      projectStatus: [],
      //文件类型
      fileType:[],
      projectSearchKey:'',
      tableData: [],
      //文档列表
      FileList:[],
      spForm:{id:'',certifiedAgency:'',recordFilingReduction:''},
      upLoadParam: {},

      mainPageNum: 1,       // 主表格当前页码
      mainPageSize: 10,     // 主表格每页条数
      //选择项目弹窗的页码 
       mainTotal: 0,         // 总记录数
       projectPageNum: 1, // 项目选择弹窗当前页码（独立变量）
      projectPageSize: 5, // 项目选择弹窗每页条数（独立变量）
     projectList:[],
      projectTotal:'',
      tableLoading: false,  // 表格加载状态
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      selectedProjects: [], // 选中的项目

      form: {
        certificationCriteria: '', // 核证标准
        projectName: '',           // 项目名称（搜索用）
        mName: '',                 // 方法学名称
        fieldCode: '',             // 领域
        industry: '',             // 行业
        status: '',                // 状态
        initiationDateStart: '',   // 立项日期开始
        initiationDateEnd: '',      // 立项日期结束
        projectStatus:'',
        carbonProjectId:'',
        tenantId:'',
      },
     FileUrl:'',
      uploadForm: { 
        projectName: '',  // 初始化时显式定义
        projectId: '',
        type: '',
        uploadFileName:'',
        FileUrl:''
    },

         formRules: {
          projectName: [
        { 
          required: true,  // 表示该字段为必填项
          message: '请选择项目',  // 验证失败时的提示信息
          trigger: ['blur', 'change']  // 触发验证的时机：失去焦点或值改变时
        }
      ],
       type: [
        { 
          required: true,  // 表示该字段为必填项
          message: '请选择文件类型',  // 验证失败时的提示信息
          trigger: ['blur', 'change']  // 触发验证的时机：失去焦点或值改变时
        }
      ],
       FileUrl: [
        { 
          required: true,  // 表示该字段为必填项
          message: '请选择文件',  // 验证失败时的提示信息
          trigger: ['blur', 'change']  // 触发验证的时机：失去焦点或值改变时
        }
      ]
    }
    };
  },


computed: {
  
    mainTotalPages() {
    if (this.mainTotal <= 0) return 0;
    return Math.ceil(this.mainTotal / this.mainPageSize);
  },
  },

  mounted() {
     this.loadInfo();
    this.queryProjectsFile();
    this.loadSelectorData();
    this.upLoadParam = getFeiShuUpLoadProjectParams();
  },

  methods:{
      showall(){
         this.form.carbonProjectId=null;
            this.queryProjectsFile();
      },
      loadInfo(){
        const searchParams = new URLSearchParams(window.location.search);
        const id = searchParams.get('projectId');
        this.form.carbonProjectId = id
        
    },

      handleTranChange(file, fileList) {
      this.FileList = fileList.slice(-1);
      this.uploadForm.uploadFileName = file.name;
    },
     removeFileList(file, fileList) {
      this.FileList = [];
     this.uploadForm.FileUrl = "";
    },
    upLoadParamTranFile(response, file, fileList) {
      if (response) {
        this.uploadForm.FileUrl = response.msg;
        console.log("看看url",this.FileUrl);
      }
    },
    
    tranFilehandlePreview(file) {
      let FileUrl = file.response.msg;
      openUrlInNewWindow(FileUrl);
    },

      // 重置分页
      resetMainPagination() {
        this.mainPageNum = 1;
        this.queryProjects();
      },

      // 项目搜索
      handleProjectSearch() {
        this.mainPageNum = 1;
        this.queryProjects();
      },

      // 方法学搜索
      handleMethodSearch() {
        this.mainPageNum = 1;
        this.queryProjects();
      },

      // 处理页码变化
      handleMainPageChange(val) {
        this.mainPageNum = val;
        this.queryProjects();
      },

      // 处理每页条数变化
      handleMainPageSizeChange(val) {
        this.mainPageSize = val;
        this.mainPageNum = 1;
        this.queryProjects();
      },

       // 关闭项目选择弹窗
    handleProjectSelectorClose() {
      this.selectedProjects = [];
      this.projectSearchKey = "";
    },
      // 格式化日期为YYYY-MM-DD
      formatDate(date) {
        if (!date) return '';
        const d = new Date(date);
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
      },
      

     handleSubmit() {
  this.$refs.uploadForm.validate((valid) => {
    if (valid) {
      this.$request.get("/assets/carbonProjectDoc/searchFileType", {
        params: {
          projectId: this.uploadForm.projectId,
          fileTypeCode: this.uploadForm.type,
        },
      }).then(res => {
        if (res.code === 200) {
          const requestData = {
            carbonProjectId: this.uploadForm.projectId || null,  // 映射projectId到carbonProjectId
            type: this.uploadForm.type || "0210000001",         // 使用选择的文件类型
            title: this.uploadForm.uploadFileName || null,       // 用上传的文件名作为标题
            url: this.uploadForm.FileUrl || null                 // 映射FileUrl到url
          };
          this.$request.post("/assets/carbonProjectDoc/add", requestData).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg);  
              this.fromVisible = false;
              this.queryProjectsFile();
            } else {
              this.$message(res.msg);
            }
          });  
        }
      });  
    }
  });  
} , 

 handleSubmit2() {   
  this.$request.post('/assets/carbonProjectDoc/add013', {},  
    {params: { id: this.id, carbonProjectId: this.carbonProjectId} 
    }
  ).then(res => {
    if(res.code === 200) {
     this.$request.post("/assets/carbonProject/addReduction", this.spForm).then(res => {
        if(res.code === 200) {
          this.$message.success(res.msg)
          this.resetUploadForm2()
          this.queryProjectsFile()
        }
      })
    }
  })
},
       // 打开项目选择弹窗
    openProjectSelector() {
      this.projectSelectorVisible = true;
      this.projectPageNum = 1; // 重置页码
      this.fetchProjectList(); // 加载数据
    },

      // 获取项目列表
    async fetchProjectList() {
      this.projectLoading = true;
      const params = {
        page: this.projectPageNum, // 使用独立页码变量
        pageSize: this.projectPageSize,
        projectName: this.projectSearchKey,
        tenantId: this.user.tenantId,
      };
      try {
        const res = await this.$request.get("/assets/carbonProjectDoc/list", {
          params,
        });
        if (res.code === 200) {
          this.projectTotal = Number(res.data.total) || 0;
          // 同步当前页码（同样转换为数字）
          this.projectPageNum = Number(res.data.current) || 1;
          this.projectList = res.data.records || [];
        }
      } catch (error) {
        this.$message.error("获取项目列表失败，请稍后重试");
        console.error(error);
      } finally {
        this.projectLoading = false;
      }
    },
     // 选择项目
    selectProject(row) {
      console.log("选择项目的row", row);
      this.uploadForm.projectId = row.id,
        this.uploadForm.projectName = row.projectName;
      this.projectSelectorVisible = false;
    },

     resetUploadForm() {
      // 1. 关闭上传弹窗（而非场外弹窗）
      this.fromVisible = false;
      this.uploadForm = {
       projectName: '',  // 初始化时显式定义
        projectId: '',
        type: '',
        uploadFileName:'',
        FileUrl:''
      };
      // 3. 清空文件上传列表（如果有）
      this.FileList = []; 
      // 4. 清除表单校验状态（如果使用了el-form的校验）
      if (this.$refs.uploadForm) {
        this.$refs.uploadForm.resetFields();
      }
    },

     resetUploadForm2(){
            this.spForm.id = null
            this.spForm.recordFilingReduction = null
            this.spForm.certifiedAgency
            this.qzView = false
    },
      queryProjectsFile() {

      this.tableLoading = true;
      const params = {
        ...this.form,
        pageNum: this.mainPageNum,      // 添加当前页码
        pageSize: this.mainPageSize  // 添加每页条数
      };

      // 处理状态默认值
      if (params.status === '0040000000') {
        params.status = null;
      }

      // 处理默认值为空的情况
      if (params.certificationCriteria === '0070000000') {
        params.certificationCriteria = null;
      }
   
      // 处理日期格式
      if (params.initiationDateStart) {
        params.initiationDateStart = this.formatDate(params.initiationDateStart);
      }
      if (params.initiationDateEnd) {
        params.initiationDateEnd = this.formatDate(params.initiationDateEnd);
      }

      this.$request.get('/assets/carbonProjectDoc/queryBySelector', {
        params: params
      }).then(res => {
        this.tableLoading = false;
        if (res.code === 200) {
          this.tableData = res.data.records || [];
          this.mainTotal = res.data.total || 0;
        }
      }).catch(error => {
        this.tableLoading = false;
        console.error("查询项目列表失败:", error);
      });
    },

    handlesjsp(row){
        this.id = row.id
        this.carbonProjectId = row .carbonProjectId
        this.$confirm('您确定通过该文件吗？', '确认通过', { type: "warning" }).then(response => {
            this.$request.post('/assets/carbonProjectDoc/add004', {},  
            {params: { id: this.id,carbonProjectId:this.carbonProjectId} 
             }
            ).then(res=>{
        if(res.code === 200){
            this.$message.success(res.msg)
            this.queryProjectsFile()
            
        }
      })
      })
    },
    handlesdsp(row){
        this.id = row.id
        this.carbonProjectId = row .carbonProjectId
        this.$confirm('您确定通过该文件吗？', '确认通过', { type: "warning" }).then(response => {
            this.$request.post('/assets/carbonProjectDoc/add005', {},  
            {params: { id: this.id,carbonProjectId:this.carbonProjectId} 
             }
            ).then(res=>{
        if(res.code === 200){
            this.$message.success(res.msg)
            this.queryProjectsFile()
            
        }
      })
      })
    },
     handlejcsp(row){
        this.id = row.id
        this.carbonProjectId = row .carbonProjectId
        this.$confirm('您确定通过该文件吗？', '确认通过', { type: "warning" }).then(response => {
            this.$request.post('/assets/carbonProjectDoc/add009', {},  
            {params: { id: this.id,carbonProjectId:this.carbonProjectId} 
             }
            ).then(res=>{
        if(res.code === 200){
            this.$message.success(res.msg)
            this.queryProjectsFile()
            
        }
      })
      })
    }, 
    handlehzsp(row){
        this.id = row.id
        this.carbonProjectId = row .carbonProjectId
        this.$confirm('您确定通过该文件吗？', '确认通过', { type: "warning" }).then(response => {
            this.$request.post('/assets/carbonProjectDoc/add011', {},  
            {params: { id: this.id,carbonProjectId:this.carbonProjectId} 
             }
            ).then(res=>{
        if(res.code === 200){
            this.$message.success(res.msg)
            this.queryProjectsFile()
            
        }
      })
      })
    },

     handleqzsp(row){
        this.id = row.id
        this.carbonProjectId = row .carbonProjectId
        this.spForm.id = row.carbonProjectId
        this.qzView = true
    },



      handleView(url) {
        const searchUrl = url;
      // 在新窗口打开百度搜索页面
      window.open(searchUrl, '_blank');
    },

    handleDoc(id) {
      // 文档操作逻辑
      this.$router.push({
    path: '/carbon/projectDo/projectDoc',
    query: { id: id }
  })
    },
 // 项目选择弹窗分页切换
    handleProjectPageChange(newPage) {
      this.projectPageNum = newPage;
      this.fetchProjectList();
    },
      loadSelectorData() {
      this.$request.get('/assets/carbonCreditAssets/querySelector').then(res => {
        if (res.code === 200) {
          this.certificationCriteria = res.data.certificationList
          this.projectScope = res.data.projectScopeList
          this.fileType = res.data.fileTypeList
          this.issuingAgency = res.data.issuingAgencyList
        }
      })
    },

    handleSelectionChange(selection) {
      // 处理选择变化
      this.selectedProjects = selection;
    },
     handleDelete(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', { type: "warning" }).then(response => {
        this.$request.delete('/assets/carbonProjectDoc/delete', { params: {
          id: id
        }}).then(res => {
          if (res.code === 200) {   // 表示操作成功
            this.$message.success('操作成功')
            this.queryProjectsFile();
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.carbon-credit-page {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* 筛选区域样式 */
.filter-section {
  background: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  .filter-row,
  .search-row {
    display: flex;
    flex-wrap: wrap;
  }

  .filter-item {
    margin-bottom: 10px;
  }

  .filter-label {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
    min-width: 60px;
  }

  .filter-label2 {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
    width: 150px;
  }

  .filter-select,
  .filter-date {
    width: 100%;
    --el-input-border-color: #dcdfe6;
  }

  .search-container {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .search-input {
    flex: 1;
    margin-right: 10px;
    --el-input-border-color: #dcdfe6;
  }
}

/* 操作按钮样式 */
.operation-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

  .btn-text {
    cursor: pointer;
    &.view {
      color: #409eff;
    }
    &.doc {
      color: #67c23a;
    }
    &:hover {
      text-decoration: underline;
    }&.delete {
      color: #f56c6c;
    }
  }
}

/* 表格样式 */
.table {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>